
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>about</title>
		<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
		<link rel="stylesheet" href="mofang.css"/>
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: 'montserrat', sans-serif;
				box-sizing: border-box;
			}
			.services-section {
				background: #333;
				background-size: cover;
				padding: 60px 0;
			}
			.inner-width {
				width: 100%;
				max-width: 1200px;
				margin: auto;
				padding: 0 20px;
				overflow: hidden;
			}
			.section-title {
				text-align: center;
				color: #ddd;
				text-transform: uppercase;
				font-size: 30px;
			}
			.border {
				width: 160px;
				height: 2px;
				background: #82ccdd;
				margin: 40px auto;
			}
			.services-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}
			.service-box {
				max-width: 33.33%;
				padding: 10px;
				text-align: center;
				color: #ddd;
				cursor: pointer;
			}
			.service-icon {
				display: inline-block;
				width: 70px;
				height: 70px;
				border: 3px solid #82ccdd;
				color: #82ccdd;
				transform: rotate(45deg);
				margin-bottom: 30px;
				margin-top: 16px;
				transition: 0.3s linear;
			}
			.service-icon i {
				line-height: 70px;
				transform: rotate(-45deg);
				font-size: 26px;
			}
			.service-box:hover .service-icon {
				background: #82ccdd;
				color: #ddd;
			}
			.service-title {
				font-size: 18px;
				text-transform: uppercase;
				margin-bottom: 10px;
			}
			.service-desc {
				font-size: 14px;
			}
			@media screen and (max-width: 960px) {
				.service-box {
					max-width: 45%;
				}
			}
			@media screen and (max-width: 768px) {
				.service-box {
					max-width: 50%;
				}
			}
			@media screen and (max-width: 480px) {
				.service-box {
					max-width: 100%;
				}
			}
		</style>
	</head>
	<body>
		<div class="services-section">
			<div class="inner-width">
				<h1 class="section-title">魔仙堡干饭集团</h1>
				<div class="border"></div>
				<div class="services-container">
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-paint-brush"></i>
						</div>
						<div class="service-title">About us</div>
						<div class="service-desc">
							该集团由湘潭大学琴湖六栋118魔仙堡的王漫妮小魔仙投资，其室友扶持创立，我们的初衷是让每一份外卖安全到达各位买家手中。（详细介绍请转下一页）
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-brush"></i>
						</div>
						<div class="service-title">Original Intention</div>
						<div class="service-desc">
							由于学校丢外卖事件频繁发生，为了不影响同学们正常干饭，我公司决定在各宿舍楼下安装既保温又保冷的外卖自提柜。更好地服务各位干饭王，（当然也是为了本公司3号小魔仙的干饭之路着想）。
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-object-ungroup"></i>
						</div>
						<div class="service-title">Characteristic</div>
						<div class="service-desc">
							我们的外卖自提柜支持保温，恒温，加热等功能，并且支持定时杀毒功能，可在柜子闲时进行自动杀毒。（大家可以放心食物的安全与可口性）
						</div>
					</div>
					
					
					<div class="service-box">
						<div class="service-icon">
							<i class="fab fa-android"></i>
						</div>
						<div class="service-title">Strategy</div>
						<div class="service-desc">
							我们的运营策略是，在湘潭大学宿舍楼下安装外卖自提柜，并通过微信小程序实现骑手与买家的密切联系。用户网络下单之后，商家安排业务员将快餐送至相应宿舍区的外卖自提柜内，配送员需要在柜内输入用户的业务联系方式，柜子会根据配送员输入的联系方式发送短信验证码给到用户，用户再通过验证码进行自取即可。
						</div>
					</div>
				</div>
			</div>
		</div>
		 <div class="monfang">
        <div class="cube">
            <div class="front">
                <a href="team.html">下一页</a>
            </div>
            <div class="back">
                <a href="javascript:;">投币</a>
            </div>
            <div class="right">
                <a href="javascript:;">收藏</a>
            </div>
            <div class="left">
                <a href="javascript:;">点赞</a>
            </div>
            <div class="top">
                <a href="javascript:;">努力</a>
            </div>
            <div class="bottom">
                <a href="javascript:;">加油</a>
            </div>
        </div>
    </div>
	</body>
</html>

